<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- 导航区 -->
    <nav>
        <span>9466云专题</span>
        <span></span>
        <span class="iconfont icon-yonghu">龙猫(9466云专题)</span>
    </nav>
    <!-- 内容区 -->
    <div class="content">
        <!-- 左边区域 -->
        <ul>
            <li class="iconfont icon-home" >首页</li>
            <li class="iconfont icon-zhuantiguanli">专题</li>
            <li class="iconfont icon-yonhu">用户</li>
            <li class="iconfont icon-shezhi">设置</li>
            <li class="iconfont icon-xitongrizhi">日志</li>
        </ul>
        <!-- 右边区域 -->
        <main>
            <div class="sousuo">
                <input type="text" placeholder="搜索用户">
                <button>搜索</button>
            </div>
            <button>+添加用户</button>
            <table border="1" width="90%" height="330" cellspacing="0">
                <thead>
                    <tr>
                        <th>邮箱（账户）</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>所属组</th>
                        <th>管理员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>3ww@qq.com</td>
                        <td>马云</td>
                        <td>10086</td>
                        <td>执行总监</td>
                        <td>是</td>
                        <td><span class="stautes">正常</span></td>
                        <td>
                            <span>编辑</span>
                            <span>删除</span>
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <div class="foot">
                <span>上一页</span>
                <span>下一页</span>
            </div>
        </main>
    </div>
</body>
</html>

<!-- <script src="./promise-ajax.js"></script>9 -->
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<!-- <script src="./mock.js"></script> -->
<script src="./md.js"></script>

<script>
    // var page = 1;
    // 渲染
    function render(data) {
        // ajax('get',``,{page:page,count:3}).then((data)=>{
            var str = data.map((item, index) => {
            return `
            <tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.group}</td>
                <td>${item.admin ? '是' : '否'}</td>
                <td><span class="stautes">${item.stautes ? '是' : '否'}</span></td>
                <td>
                    <span>编辑</span>
                    <span data-suoyin=${index} class="del">删除</span>
                </td>
            </tr> `
        }).join('')
        document.querySelector('tbody').innerHTML = str
        // })
    }
    // 调用
    // render(data.list)
    var btn = document.querySelectorAll('button')
    for (var i = 0; i < btn.length; i++) {
        // 添加数据绑定事件
        btn[1].onclick = function () {
            console.log(333);
            render(data.list)
        }
    }
    var btns = document.querySelectorAll('.foot>span')
    console.log(btns);
    // 上一页
    btns[0].onclick = function () {
        // console.log(11);
    //     if( page > 1 ){
    //           if(page=--page)  {
    //             render(data.list)
    //           }
    //         } 
    }
    // 下一页
    btns[1].onclick = function(){
        // console.log(222);
        // if(page < 4 ){
        //         if(page=++page){
        //           render(data.list)
        //         }
        //     }
    }
    // 删除
    var d = document.querySelector('tbody')
    console.log(d);
    d.onclick=function(e){
        console.log(d);
        if (e.target.className =='del'){
            // data.list.splice(e.target.dataset.suoyin,1)
        }
    }
</script>